<template>
	<view class="message-page">
		<z-button bg-color="#fff" @click="showMessage">默认消息提示</z-button>
		<z-button bg-color="#fff" @click="showMessageAlways">一直显示消息提示</z-button>
		<z-button bg-color="#fff" @click="hideMessage">主动关闭消息提示</z-button>
		<z-button bg-color="warning" @click="showWarning">警告提示</z-button>
		<z-button bg-color="success" @click="showSuccess">成功提示</z-button>
		<z-button bg-color="error" @click="showError">错误提示</z-button>
		<message ref="msg"></message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			showMessage(){
				this.$refs.msg.show('默认普通消息提示')
			},
			showMessageAlways(){
				this.$refs.msg.show({
					content: '一直显示消息提示',
					duration: 0
				})
			},
			hideMessage(){
				this.$refs.msg.hide()
			},
			showWarning(){
				this.$refs.msg.show({
					content: '这是一条警告提示',
					type: 'warning'
				})
			},
			showSuccess(){
				this.$refs.msg.show({
					content: '这是一条成功提示',
					type: 'success'
				})
			},
			showError(){
				this.$refs.msg.show({
					content: '这是一条错误提示',
					type: 'error'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: $page-bg;
}
.message-page{
	padding: 40upx;
	button{
		margin-bottom: 20upx;
	}
}
</style>
